<script>
import {Advice, Menw, Wmen} from "@/views/advice";
import {Advices, Echats,} from "@/api/tool/gen";


export default {
  name: "Index",
  data() {
    return {
      tableData: [{
        date: '1月',
        name: '信息学院',
        address: '本科',
        peoPle: 20,
      }, {
        date: '2月',
        name: '信息学院',
        address: '本科',
        peoPle: 20,
      }, {
        date: '3月',
        name: '信息学院',
        address: '本科',
        peoPle: 20,
      },
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 第二个月份
      valueMon: '',
      // 学院
      valueDay: '',
      // 学历
      valueTud: '',
      optionS: [{
        value: '选项1',
        label: '1'
      }, {
        value: '选项2',
        label: '2'
      }, {
        value: '选项3',
        label: '3'
      },
      ],
      Options: [{
        value: '选项1',
        label: '请选择学院'
      },
      ],
      OpTions: [{
        value: '选项1',
        label: '请选择学历'
      },
        {
          value: '选项2',
          label: '本科'
        },
        {
          value: '选项3',
          label: '研究生'
        },
      ],
      value: '',
      vaLue: '',
      currentPage1: 1,
      currentPage2: 2,
      currentPage3: 3,
      currentPage4: 4,
      pepoe: [],
      pepoeA: [],
      barlist:'',
    };
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
    },
    Cusyitop() {
      Mondth.value = ''
      MondthA.value = ''
      MondthB.value = ''
      MondthC.value = ''
    },
    add(){
      // console.log(this.value)
    }
  },
  mounted() {
    // 咨询人数图表
    var advice = this.$echarts.init(document.getElementById("ets_chart"))
    // 男女比例图表
    var proportion = this.$echarts.init(document.getElementById("ets_wmen"))
    var postgraduate = this.$echarts.init(document.getElementById("ets_menw"))

    advice.setOption(Advice(this.barlist))
    proportion.setOption(Wmen())
    postgraduate.setOption(Menw())
  },
  created() {
    Advices().then(res => {
      this.pepoe = res.data.duration
      this.pepoeA = res.data.totalDuration
    })
    Echats().then(res=>{
      this.barlist=res.data
    })
    Advice(this.barlist)
  },
};
</script>

<template>
  <div id="Box">
    <!--首页的总盒子:whole-->
    <div class="whole">
      <!--数据总览:overview-->
      <div class="overview">数据总览</div>
      <div class="top_data">
        <div>
          <p>咨询人数</p>
          <p>{{ pepoe }}<span>今日</span></p>
          <p>共{{ pepoeA }}</p>
        </div>
        <div>
          <p>访问人数</p>
          <p>{{ pepoe }}<span>今日</span></p>
          <p>共{{ pepoeA }}</p>
        </div>
        <div>
          <p>咨询时长（小时）</p>
          <p>{{ pepoe }}<span>今日</span></p>
          <p>共{{ pepoeA }}小时</p>
        </div>
      </div>
      <!--三个盒子下面的echarts图表:ets_main-->
      <div class="ets_main">
        <!--咨询人数盒子-->
        <div class="ets_main_left">
          <!--顶部盒子-->
          <div>
            <p>咨询人数</p>
            <div>
              <!--日期UI-->
              <div class="block">
                <el-date-picker
                  v-model="value"
                  type="daterange"
                  align="right"
                  @change="add()"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </div>
            </div>
          </div>
          <!--图表盒子-->
          <div id="ets_chart"></div>
        </div>
        <!--男女比例盒子-->
        <div class="ets_main_right">
          <!--顶部盒子-->
          <div>
            <p>男女比例</p>
            <div>
              <!--日期UI-->
              <div class="block">
                <el-date-picker
                  v-model="vaLue"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </div>
            </div>
          </div>
          <!--图表盒子-->
          <div>
            <!--男女占比-->
            <div id="ets_wmen"></div>
            <!--研究生本科占比-->
            <div id="ets_menw"></div>
          </div>
        </div>
      </div>
      <!--底部月份:month-->
      <div class="month">
        <!--月份学院学历:top_month-->
        <div class="top_month">
          <!--月份下第一个盒子-->
          <div>
            <p>月份</p>
            <div>
              <el-select v-model="value" id="Mondth" placeholder="1">
                <el-option
                  v-for="item in optionS"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <p>~</p>
            <div>
              <el-select v-model="valueMon" id="MondthA" placeholder="1">
                <el-option
                  v-for="item in optionS"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <!--月份下第二个盒子-->
          <div>
            <p>学院</p>
            <div>
              <el-select v-model="valueDay" id="MondthB" placeholder="请选择学院">
                <el-option
                  v-for="item in Options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <p>学历</p>
            <!--学历下拉列表单独类名:scholl-->
            <div class="scholl">
              <el-select v-model="valueTud" id="MondthC" placeholder="请选择学历">
                <el-option
                  v-for="item in OpTions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <!--搜索重置按钮:btnStr-->
            <div class="btnStr">
              <button>搜索</button>
              <button @click="Cusyitop">重置</button>
            </div>
            <div class="btnstR">
              <button>导出</button>
            </div>
          </div>
        </div>
        <!--月份学院学历下面的表格-->
        <div class="tabel_month">
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="月份"
              width="360">
            </el-table-column>
            <el-table-column
              prop="name"
              label="学院"
              width="364">
            </el-table-column>
            <el-table-column
              prop="address"
              label="学历"
              width="365"
            >
            </el-table-column>
            <el-table-column
              prop="peoPle"
              label="咨询人数"
              width="365"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--底部分页器-->
      <div class="end_page">
        <!--分页器右边的盒子-->
        <div>
          <!--分页器UI-->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage1"
              :page-sizes="[100, 200, 300, 400,500,600,700,800]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="800">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  list-style: none;

  button {
    cursor: pointer
  }
}

//整体盒子css
#Box {
  width: 100%;
  background-color: rgb(242, 243, 244);
  padding-top: 12px;
}

//内容整体盒子css
.whole {
  width: 1656px;
  height: 1153px;
  margin: auto;
  background-color: #fff;
  padding: 25px 69px 29px 44px;
}

//数据总览css
.overview {
  font-size: 20px;
}

//数据总览下面的三个盒子
.top_data {
  width: 100%;
  display: flex;
  margin-top: 37px;

  //三个盒子总体样式
  div {
    width: 287px;
    height: 174px;
    border-radius: 4px;
    border: 1px solid rgba(187, 187, 187, 1);
    padding-top: 15px;
    padding-left: 27px;
    padding-bottom: 18px;
  }

  //第一个盒子
  div:nth-of-type(1) {
    //第一个盒子下面的第二个p标签是42342
    p:nth-of-type(2) {
      font-size: 36px;
      text-align: center;
      margin-top: 22px;

      span {
        font-size: 14px;
      }
    }

    //第一个盒子下面的第三个p标签是共97492
    p:nth-of-type(3) {
      font-size: 14px;
      margin-top: 23px;
    }
  }

  //第二个盒子
  div:nth-of-type(2) {
    margin-left: 46px;
    font-size: 16px;
    //第二个盒子下面的第二个p标签是42342
    p:nth-of-type(2) {
      font-size: 36px;
      text-align: center;
      margin-top: 22px;

      span {
        font-size: 14px;
      }
    }

    //第二个盒子下面的第三个p标签是共97492
    p:nth-of-type(3) {
      font-size: 14px;
      margin-top: 23px;
    }
  }

  div:nth-of-type(3) {
    margin-left: 46px;
    font-size: 16px;
    //第三个盒子下面的第二个p标签是42342
    p:nth-of-type(2) {
      font-size: 36px;
      text-align: center;
      margin-top: 22px;

      span {
        font-size: 14px;
      }
    }

    //第三个盒子下面的第三个p标签是共97492
    p:nth-of-type(3) {
      font-size: 14px;
      margin-top: 23px;
    }
  }
}

//数据总览下面的盒子css
.ets_main {
  width: 100%;
  margin-top: 63px;
  margin-left: 13px;
  display: flex;
  justify-content: space-between;
}

//咨询人数盒子css
.ets_main_left {
  width: 751px;

  #ets_chart {
    width: 100%;
    height: 388px;
  }

  //顶部盒子
  div:nth-of-type(1) {
    display: flex;
    justify-content: space-between;

    p {
      font-size: 20px;
    }

    div {

    }
  }
}

//男女比例盒子css
.ets_main_right {
  width: 751px;

  #ets_chart {
    width: 100%;
    height: 388px;
  }

  //顶部盒子
  div:nth-of-type(1) {
    display: flex;
    justify-content: space-around;

    p {
      font-size: 20px;
    }

    div {

    }
  }

  div:nth-of-type(2) {
    display: flex;
  }

  #ets_wmen {
    width: 400px;
    height: 400px;
    margin-left: -80px;
  }

  #ets_menw {
    width: 400px;
    height: 400px;
  }
}

//底部月份盒子css
.month {
  width: 1456px;
  height: 241px;
  margin: auto;
  margin-top: 32px;
  margin-left: 84px;
}

//顶部盒子月份css
.top_month {
  display: flex;
  //第一个月份盒子
  div:nth-of-type(1) {
    display: flex;
    align-items: center;
    //月份下拉列表盒子
    div {
      width: 84px;
      height: 30px;
      margin-left: 16px;
    }

    p:nth-of-type(1) {
      font-size: 14px;
    }

    p:nth-of-type(2) {
      margin-left: 36px;
      font-size: 18px;
    }
  }

  div:nth-of-type(2) {
    margin-left: 49px;
    display: flex;
    align-items: center;

    div:nth-of-type(1) {
      width: 200px;
      height: 30px;
    }

    p:nth-of-type(1) {
      font-size: 14px;
    }

    p:nth-of-type(2) {
      font-size: 14px;
      margin-left: 58px;
    }
  }
}

//月份下拉列表居中
.el-select-dropdown__item {
  text-align: center !important;
}

.scholl {
  margin-left: 16px !important;
}


.btnStr {
  button:nth-of-type(1) {
    width: 80px;
    height: 30px;
    background-color: rgb(24, 146, 255);
    color: white;
    border: none;
    border-radius: 2px;
    margin-left: 33px;
    transition: all 0.3s;

    &:hover {
      background-color: rgb(88, 171, 245);
    }
  }

  button:nth-of-type(2) {
    width: 80px;
    height: 30px;
    border: 1px solid rgba(187, 187, 187, 1);
    border-radius: 2px;
    margin-left: 18px;
    transition: all 0.3s;

    &:hover {
      background-color: white;
    }
  }
}

//导出按钮css
.btnstR {
  margin-left: 308px;

  button {
    width: 80px;
    height: 30px;
    background-color: rgb(24, 146, 255);
    color: white;
    border: none;
  }
}

.tabel_month {
  width: 1456px;
  margin-top: 19px;
  height: 208px;
}

//底部分页器css
.end_page {
  margin-top: 42px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
